<!DOCTYPE html>
<html>
  
  <head>
      <meta charset="UTF-8">
      <title>购票</title>
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
      <link rel="stylesheet" href="/booking2/css/font.css">
      <link rel="stylesheet" href="/booking2/css/xadmin.css">
      <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
      <script type="text/javascript" src="/booking2/lib/layui/layui.js" charset="utf-8"></script>
      <script type="text/javascript" src="/booking2/js/xadmin.js"></script>
      <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
      <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  
  <body background="/booking/images/home/banner.jpg">
    <div class=" text-center layui-col-lg12" style="text-align: center;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend class="x-red">查询中心</legend>
        </fieldset>
    </div>
    <div class=" layui-col-md4">欢乐谷之夜</div>
    <div class="x-body layui-col-md4">
    <fieldset class="layui-elem-field layui-bg-red">
        <legend>请填写手机号验证</legend>
        <div class="layui-field-box layui-bg-gray">
            <form method="post" class="layui-form" id="sms">
                <input name="tel" id="tel" placeholder="电话"  type="text" style="width:200px" lay-verify="phone" class="layui-input" >
                <hr style="width:200px">
                <input name="code" lay-verify="required" placeholder="验证码"  type="password" style="width:200px" class="layui-input layui-col-sm2 ">
                <div id="send">
                    <button type="button" style="margin-left: 0px;"	class="layui-btn layui-btn-xs" onclick="sendSms()" >发送验证码</button>
                </div>
                <hr style="width:200px">
                <input value="查询" lay-submit lay-filter="smdLogin" style="width:100%;" type="submit">
                <hr style="width:200px">
            </form>
        </div>
    </fieldset>
    </div>
    <script>
        layui.use('form', function(){
            var form = layui.form;
            //监听提交
            form.on('submit(smdLogin)', function(data){
                console.log(JSON.stringify(data.field));
                $.ajax({
                    url:"/booking/smsLogin",
                    type:"get",
                    data:data.field,
                    dataType:"json", //返回类型
                    success:function(data){
                        layer.alert(data.info);
                        if(data.info=="查询成功！"){
                            parent.window.location.replace("/booking/queryBookingByTel?tel="+data.tel);
                        }
                    }
                })
                return false;
            });
        });

        //发送短信
        function sendSms(){
            var tel = $("#tel").val()
            //计时器秒
            var s =60;
            $.ajax({
                url:"/booking/sendSms",
                type:"get",
                data:{"phone":tel},
                dataType:"json", //返回类型
                success:function(data){
                    console.log(data)
                    layer.alert(data.info);
                }
            })
            var time = setInterval(function () {
                //禁用发送验证码按钮
                $("#send").html("<button type='button'  class='layui-btn layui-btn-disabled layui-btn-small' >"+s+"秒后发送验证码</button>")
                s--;
                if(s==0){ //倒计时结束
                    //清除计时器
                    clearInterval(time);
                    //启用发送验证码
                    $("#send").html("<button type='button' class='layui-btn' onclick=\"sendSms()\">发送验证码</button>")
                }

            },1000)

        }
    </script>
  </body>

</html>